<template>
    <div class="bg">
      <div class="login">
          <div class="title">
              江洋的网上超市
          </div>
          <div class="main">
              <div class="main-title">
                  <h3>用户注册</h3>
              </div>
              <div class="acount">
                  <input type="text" placeholder="请输入账号" v-model="name" style="width: 300px;">
              </div>
              <div class="psw">
                  <input type="password" placeholder="请输入密码" v-model="pwd" style="width: 300px;">
              </div>
              <button @click="register">提交</button>
          </div>
      </div>
    </div>
  </template>
  
  <script>
  import { ref, watch } from 'vue'
  import { useRouter } from 'vue-router'
  import axios from 'axios'
  import { ElMessage } from 'element-plus'
  
  export default {
      name:'Register',
      setup(){
          const router = useRouter()
          const name = ref(null)
          const pwd = ref(null)
  
            async function register() {
                try {
                    const response = await axios.post('http://127.0.0.1:3007/api/register', { 
                        username: name.value, 
                        password: pwd.value 
                    })
                    if(!response.data.status){
                        ElMessage({
                            message: response.data.msg,
                            type: 'success',
                            duration: 2000 // 消息持续时间，单位：毫秒
                        })
                        router.replace({ name: 'login' })
                    }else{
                        ElMessage({
                            message: response.data.msg,
                            type: 'warning',
                            duration: 2000 // 消息持续时间，单位：毫秒
                        })
                    }
                } catch (error) {
                    console.error('注册失败:', error)
                }
            }
  
          return { register, name, pwd }
      }
  }
  </script>
  
  <style scoped>
      .bg {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%,-50%);
          background-image: url('@/assets/images/loginBg.jpg');
          background-size: cover;
          padding: 100px 200px;
      }
      .login {
          display: flex;
          flex-direction: column;
          justify-content: center;
      }
      .title {
          color: white;
          width: 400px;
          text-align: center;
          margin-bottom: 15px;
          font-size: 25px;
          font-weight: bold;
      }
      .main {
          border: 1px solid #ccc;
          height: 200px;
          width: 400px;
          background-color: white;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;
      }
      button {
          color: white;
          width: 200px;
          border: none;
          border-radius: 10px;
          background: linear-gradient(to right,#ffb5b5,#F56C6C);
      }
  </style>